<template>
  <div
    style="
      background-color: white;
      width: 100%;
      height: 100%;
      padding: 20px 20px;
    "
  >
    <div class="flex-row" style="align-items: center">
      <div class="vertical-line" style="height: 22px"></div>
      <h3 style="margin: 0px 0px">修改推荐条件</h3>
    </div>
    <div class="form" style="margin-top: 20px; width: 60%; overflow-y: scroll">
      <el-form
        :model="ruleForm"
        :rules="rules"
        ref="ruleForm"
        label-width="100px"
        class="demo-ruleForm"
      >
        <el-form-item label="专业" prop="major">
          <el-select v-model="ruleForm.major" placeholder="请选择专业">
            <el-option label="区域一" value="shanghai"></el-option>
            <el-option label="区域二" value="beijing"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="学科评级" prop="majorRank">
            <el-select v-model="schoolLevel" multiple placeholder="请选择">
            <el-option v-for="item in schoolLevels" :key="item.value" :label="item.label" :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="专业排名" prop="rank">
          <el-input v-model="ruleForm.rank"></el-input>
        </el-form-item>
        <el-form-item label="研究方向" prop="searchWay">
          <el-tag
            :key="tag"
            v-for="tag in ruleForm.searchWay"
            closable
            :disable-transitions="false"
            @close="handleCloseSearch(tag)"
          >
            {{ tag }}
          </el-tag>
          <el-input
            class="input-new-tag"
            v-if="searchVisible"
            v-model="searchInput"
            ref="searchTag"
            size="small"
            @keyup.enter.native="handleInputConfirm1"
            @blur="handleInputConfirm1"
          >
          </el-input>
          <el-button
            v-else
            class="button-new-tag"
            size="small"
            @click="showInput1"
            >+ New Tag</el-button
          >
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="submitForm('ruleForm')"
            >提交</el-button
          >
          <el-button @click="resetForm('ruleForm')">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>
  
  
  <script>
export default {
  data() {
    return {
        // 学科评级
        schoolLevel:'',
      schoolLevels: [
        { label: "A+", value: "A+" },
        { label: "A", value: "A" },
        { label: "A-", value: "A-" },
        { label: "B+", value: "B+" },
        { label: "B", value: "B" },
        { label: "B-", value: "B-" },
        { label: "C+", value: "C+" },
        { label: "C", value: "C" },
        { label: "C-", value: "C-" },
      ],
      // 研究方向的tag
      searchInput: "",
      searchVisible: false,
      // 兴趣爱好的输入tag
      inputVisible: false,
      inputValue: "",
      ruleForm: {
        majorRank: "",
        major: "",
        rank: "",
        searchWay: ["人工智能", "数据挖掘", "深度学习"],
      },
      rules: {
        major: [{ required: true, message: "请选择专业", trigger: "change" }],
        searchWay: [{ required: true, trigger: "change" }],
      },
    };
  },
  methods: {
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          alert("submit!");
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    handleCloseSearch(tag) {
      this.ruleForm.searchWay.splice(this.ruleForm.searchWay.indexOf(tag), 1);
    },
    handleCloseHobby(tag) {
      this.ruleForm.hobby.splice(this.ruleForm.hobby.indexOf(tag), 1);
    },
    showInput1() {
      this.searchVisible = true;
      this.$nextTick((_) => {
        this.$refs.searchTag.$refs.input.focus();
        console.log(_);
      });
    },
    showInput2() {
      this.inputVisible = true;
      this.$nextTick((_) => {
        this.$refs.hobbyTag.$refs.input.focus();
        console.log(_);
      });
    },

    handleInputConfirm() {
      let inputValue = this.inputValue;
      if (inputValue) {
        this.ruleForm.hobby.push(inputValue);
      }
      this.inputVisible = false;
      this.inputValue = "";
    },
    handleInputConfirm1() {
      let inputValue = this.searchInput;
      if (inputValue) {
        this.ruleForm.searchWay.push(inputValue);
      }
      this.searchVisible = false;
      this.searchInput = "";
    },
  },
};
</script>
  
  <style scoped>
.el-tag + .el-tag {
  margin-left: 10px;
}

.button-new-tag {
  margin-left: 10px;
  height: 32px;
  line-height: 30px;
  padding-top: 0;
  padding-bottom: 0;
}

.input-new-tag {
  width: 90px;
  margin-left: 10px;
  vertical-align: bottom;
}
.form::-webkit-scrollbar {
  display: none;
}
</style>
  